<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Text Generator</title>
    <style>
        /* Sidebar styles */
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 18px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidebar a:hover {
            color: #f1f1f1;
        }

        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        /* Main content styles */
        #main {
            transition: margin-left .5s;
            padding: 20px;
        }

        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }

        .output {
            width: 100%;
            min-height: 150px;
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }

        button {
            padding: 10px 20px;
            margin: 10px 0;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .status-container {
            margin: 10px 0;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
        }

        .generated-output {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .loading {
            display: none;
            color: #666;
            text-align: center;
            padding: 10px;
        }

        .error {
            color: red;
            display: none;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <!-- Side navigation -->
    <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">Home</a>
        <a href="#">Features</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
        <a href="#">Help</a>
        <a href="#">Settings</a>
    </div>

    <!-- Main content -->
    <div id="main">
        <button class="openbtn" onclick="openNav()">☰ Menu</button>
        <h1>Creative Text Generator</h1>
        
        <div class="container">
            <!-- 状态显示区域 -->
            <div id="status" class="status-container">服务状态检查中...</div>
            
            <!-- 输入区域 -->
            <textarea id="inputText" placeholder="请输入需要处理的文本..."></textarea>
            
            <!-- 操作按钮 -->
            <button id="generateBtn" onclick="generateText()">生成文本</button>
            
            <!-- 加载提示 -->
            <div id="loading" class="loading">处理中，请稍候...</div>
            
            <!-- 错误提示 -->
            <div id="error" class="error"></div>
            
            <!-- 输出区域 -->
            <div class="output" id="output"></div>
            
            <!-- 修改后的文本显示区域 -->
            <div class="generated-output" id="generatedOutput"></div>
            
            <!-- 导出按钮 -->
            <button onclick="exportText()">导出文本</button>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:1414';
        
        // 侧边栏控制
        function openNav() {
            document.getElementById("mySidebar").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }

        function closeNav() {
            document.getElementById("mySidebar").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }

        // 检查服务状态
        async function checkServiceStatus() {
            const statusElement = document.getElementById('status');
            try {
                const response = await fetch(`${API_BASE_URL}/status`);
                const data = await response.json();
                
                if (response.ok) {
                    statusElement.textContent = `服务状态: ${data.message}`;
                    statusElement.style.color = 'green';
                } else {
                    throw new Error(data.error || '服务异常');
                }
            } catch (err) {
                statusElement.textContent = '服务状态: 连接失败';
                statusElement.style.color = 'red';
                console.error('服务状态检查失败:', err);
            }
        }

        // 生成文本
        async function generateText() {
            const inputText = document.getElementById('inputText').value.trim();
            const outputElement = document.getElementById('output');
            const generatedOutput = document.getElementById('generatedOutput');
            const loading = document.getElementById('loading');
            const error = document.getElementById('error');
            const generateBtn = document.getElementById('generateBtn');

            if (!inputText) {
                error.textContent = '请输入需要处理的文本';
                error.style.display = 'block';
                return;
            }

            try {
                loading.style.display = 'block';
                error.style.display = 'none';
                generateBtn.disabled = true;
                outputElement.textContent = '';
                generatedOutput.textContent = '';

                const response = await fetch(`${API_BASE_URL}/process_input`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ user_input: inputText })
                });

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.error || '处理请求时发生错误');
                }

                // 显示原始输入
                outputElement.textContent = inputText;
                // 显示生成的新文本
                generatedOutput.textContent = data.response;

            } catch (err) {
                error.textContent = err.message;
                error.style.display = 'block';
            } finally {
                loading.style.display = 'none';
                generateBtn.disabled = false;
            }
        }

        // 导出文本
        function exportText() {
            const originalText = document.getElementById('output').textContent;
            const generatedText = document.getElementById('generatedOutput').textContent;
            
            if (!originalText && !generatedText) {
                alert('没有可导出的内容');
                return;
            }

            const content = `原始文本:\n${originalText}\n\n生成的文本:\n${generatedText}`;
            
            const blob = new Blob([content], { type: 'text/plain' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'generated-text.txt';
            a.click();
            window.URL.revokeObjectURL(url);
        }

        // 页面加载时检查服务状态
        document.addEventListener('DOMContentLoaded', checkServiceStatus);
        
        // 定期检查服务状态
        setInterval(checkServiceStatus, 30000); // 每30秒检查一次
    </script>
</body>
</html>